/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import { useState, useEffect } from 'react';
import React from 'react';
import type { StringObjType } from './index.d';
import { isEmpty } from 'lodash';
import { resultTem } from './utils';
import { List, Typography } from 'antd';
const { Text, Title } = Typography;
import type { BaseType } from 'antd/lib/typography/Base';

const CheckAccountInfo: React.FC<{ data: StringObjType }> = (props) => {
  const [checkAcountInfo, setCheckAcountInfo] = useState<StringObjType[]>([]);
  const { data = {} } = props;
  useEffect(() => {
    if (isEmpty(data)) {
      setCheckAcountInfo([]);
    } else {
      const newList = resultTem.map((item) => {
        if (item.dataIndex === 'is_has_cash_record') {
          return {
            ...item,
            extra: data[item.dataIndex] ? '是' : '否',
            color: data[item.dataIndex] ? 'success' : 'danger',
            value: data[item.dataIndex],
          };
        } else {
          return {
            ...item,
            extra: data[item.dataIndex] ? '是' : '否',
            color: data[item.dataIndex] ? 'danger' : 'success',
            value: data[item.dataIndex],
          };
        }
      });
      setCheckAcountInfo(newList);
    }
  }, [data]);

  return checkAcountInfo.length ? (
    <List
      header={<Title level={5}>检测结果：</Title>}
      footer={<Text type='danger'>注：资金流水是否正常，申请人自行登录其账号进行验证</Text>}
      split={false}
      bordered
      dataSource={checkAcountInfo}
      itemLayout='horizontal'
      renderItem={(item) => (
        <List.Item extra={<Text type={item.color as BaseType}>{item.extra}</Text>}>
          <Text>{item.label}</Text>
        </List.Item>
      )}
    />
  ) : (
    <div />
  );
};
export default CheckAccountInfo;
